<form nzLayout="horizontal" nz-form [formGroup]="editorForm" (ngSubmit)="saveRole()">
  <ng-template [ngIf]="isAdd">
    <nz-form-item>
      <nz-form-control nzErrorTip="Please input roleName!">
        <nz-input-group nzPrefixIcon="user" nzSize="large">
          <input type="text" nz-input formControlName="roleName" [(ngModel)]="roleName" placeholder="Role Name"/>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
  </ng-template>
  <ng-template [ngIf]="!isAdd">
    <nz-form-item>
      <nz-input-group nzPrefixIcon="user" nzSize="large">
        <input type="text" nz-input
               [ngModel]="roleName" disabled
               [ngModelOptions]="{standalone: true}"/>
      </nz-input-group>
    </nz-form-item>
  </ng-template>
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input Role Desc!">
      <nz-input-group nzPrefixIcon="info" nzSize="large">
        <input type="text" nz-input formControlName="desc" [(ngModel)]="desc" placeholder="Role Desc"/>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-divider nzText="Bind Resource Action"></nz-divider>
  <nz-table #innerTable [nzData]="resourceActionBind" nzSize="middle" [nzShowPagination]="false" [nzBordered]="true">
    <thead>
    <tr>
      <th>Namespace</th>
      <th>Action</th>
      <th>
        <a
          nz-button
          nzType="primary"
          (click)="addResourceAction()"
        >
          <i nz-icon nzType="plus" nzTheme="outline"></i>
        </a></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let resourceAction of innerTable.data">
      <td>
        <nz-select [(ngModel)]="resourceAction.namespace" [ngModelOptions]="{standalone: true}">
          <nz-option *ngFor="let item of namespaces" [nzLabel]="item" [nzValue]="item"></nz-option>
        </nz-select>
      </td>
      <td>
        <nz-select [(ngModel)]="resourceAction.action" [ngModelOptions]="{standalone: true}">
          <nz-option nzValue="r" nzLabel="Read only"></nz-option>
          <nz-option nzValue="w" nzLabel="Write only"></nz-option>
          <nz-option nzValue="rw" nzLabel="Read and write"></nz-option>
        </nz-select>
      </td>
      <td>
        <a
          nz-button
          nzType="danger"
          (click)="removeResourceAction(resourceAction)"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </a>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <nz-divider></nz-divider>
  <button nz-button nzType="primary" [disabled]="!editorForm.valid" nzSize="large" nzBlock>Save Role</button>
</form>
